<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
        body {}
        #app{
          position: relative;
        }
        #control{
          position: absolute;
          top: 550px;
        }
        #an{
          width:90%;
          position: absolute;
          top: 500px;
        }
        #an h3{
          text-align: center;
        }
        div.mydiv{
          position: absolute;
        }
        div.mydiv div{
          margin-top: 20px;
          margin-left: 15px;
          width: 90%;
          white-space: normal;

          font-size: 25px;
        }
        div.mydiv p{
          font-size: 21px;
          margin-left: 15px;
          color: black;
        }
    </style>
</head>

<body>
  <div id="app">
    <form>


    <div v-for="(item,index) in titles" v-show="index === now" class="mydiv">
        <div>{{index+1}}.{{item.titlecon}}</div>
        <div>A<input class="aui-radio" type="radio" value="A" :name="`an[${index}]`">{{item.titlea}}</div>
        <div>B<input class="aui-radio" type="radio" value="B" :name="`an[${index}]`">{{item.titleb}}</div>
        <div>C<input class="aui-radio" type="radio" value="C" :name="`an[${index}]`">{{item.titlec}}</div>
        <div>D<input class="aui-radio" type="radio" value="D" :name="`an[${index}]`">{{item.titled}}</div>
    </div>


    <div id="an">
    <div v-for="(item,index) in titles" v-show="index === now" >
        <h3>答案：{{item.answer}}</h3>
    </div>
    </div>

    </form>
    <div id="control" class="aui-bar aui-bar-btn aui-bar-btn-round" style="width:45%;">

            <div v-show="now!==0" @click="now=now-1" class="aui-bar-btn-item aui-active">上一题</div>
            <div v-show="now!==titles.length-1" @click="now=now+1" class="aui-bar-btn-item">下一题</div>
    </div>
  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../layer/layer.js"></script>
<script type="text/javascript" src="../script/init.js" ></script>

<script type="text/javascript">
var user = JSON.parse(localStorage.getItem('user'))
var index=""
var app = new Vue({
  el:'#app',
  data:{
    titles:[],
    user:user,
    now:0
  },
  created: function () {

  },
  methods: {

    getTitle (paperid) {
      index = layer.load();
      $.ajax({
      url:bashUrl+`an/${paperid}/${user.userid}`,
      type:"get",
      data:"",
      timeout:5000,
      dataType:"json",
      success:(data)=>{
        layer.close(index)
        this.titles = data

      },
      error: function () {
        layer.close(index)
        api.toast({msg:"请求超时或繁忙",duration : 2000})
      }
      });

    }
  }
})
    apiready = function() {
      var paperid = api.pageParam.paperid
      app.getTitle(paperid)

    };
</script>

</html>
